<template>
  <div class="visitorList">
    <div class="body">
      <div class="title">访客记录</div>
      <div class="title2">
        <ul>
          <li>操作</li>
          <li>访问IP</li>
          <li>城市</li>
          <li>登录时间</li>
        </ul>
      </div>
      <div class="detail" id="detail">
        <ul id="list">
          <li v-for="item in visitorList" :key="item.id">
            <div class="item"><i class="iconfont icon-denglu"></i></div>
            <div class="item" style="fontsize: 0.8rem">{{ item.user_ip }}</div>
            <div class="item">{{ item.user_city }}</div>
            <div class="item">{{ item.visit_time }}</div>
          </li>
        </ul>
      </div>
      <div id="list_twos"></div>
    </div>
  </div>
</template>

<script>
let timer = null;
export default {
  name: "VisitorList",
  data() {
    return {
      visitorList: [],
      list_ones_offsetHeight: 0,
      list_twos_offsetHeight: 0,
    };
  },
  created() {
    this.getVisitor(1, 10);
    timer = setInterval(() => {
      let page = 2;
      const count = 10;
      let list_ones = document.getElementById("list");
      let list_twos = document.getElementById("list_twos");
      this.getVisitor(page, count);
      this.list_ones_offsetHeight = list_ones.offsetHeight;
      this.list_twos_offsetHeight = list_twos.offsetHeight;
      page++;
    }, 20000);
  },
  mounted() {
    this.$nextTick(() => {
      let list_ones = document.getElementById("list");
      let list_twos = document.getElementById("list_twos");
      this.list_ones_offsetHeight = list_ones.offsetHeight;
      this.list_twos_offsetHeight = list_twos.offsetHeight;
      this.scrolls();
    });
  },
  methods: {
    scrolls() {
      let speeds = 100;
      let wrappers = document.getElementById("detail");
      let list_ones = document.getElementById("list");
      let list_twos = document.getElementById("list_twos");
      list_twos.innerHTML = list_ones.innerHTML;
      function Marquees() {
        if (this.list_twos_offsetHeight - wrappers.scrollTop <= 0)
          wrappers.scrollTop -= this.list_ones_offsetHeight;
        else {
          wrappers.scrollTop += 1;
        }
      }
      let MyMars = setInterval(Marquees, speeds);
      wrappers.onmouseover = function () {
        clearInterval(MyMars);
      };
      wrappers.onmouseout = function () {
        MyMars = setInterval(Marquees, speeds);
      };
    },
    //获取登录信息
    getVisitor(page, count) {
      this.axios
        .get("/component/visitor", {
          params: {
            page: page.toString(),
            count: count.toString(),
          },
        })
        .then((res) => {
          if (res.data.code === "200") {
            const list = res.data.data.list;
            if (list.length != 0) {
              list.forEach((item) => {
                const city = item.user_city;
                const str1 = city.substring(0, city.indexOf("省"));
                const city2 = city.substring(str1.length + 1, city.length - 1);
                let arr = {
                  user_ip: item.user_ip,
                  user_city: city2,
                  visit_time: item.visit_time,
                };
                this.visitorList.push(arr);
              });
            }
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error("获取访客记录列表失败");
        });
    },
  },
  beforeDestroy() {
    clearInterval(timer);
    timer = null;
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.visitorList {
  margin-top: 15px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0px 3px 5px #888888;
}
.visitorList:hover {
  box-shadow: 0px 3px 12px #a3bffe;
}
.visitorList ul {
  list-style: none;
}
.detail i {
  color: #10ac84;
}
.title {
  width: 100%;
  height: 10%;
  padding: 5px 10px;
  text-align: center;
  font-size: 0.9rem;
}
.body {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 20px;
}
.detail {
  margin-top: 5px;
  width: 100%;
  height: 80%;
  overflow-y: scroll;
}
.detail::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 3px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.detail::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 40px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #5689fe;
}

.detail::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgb(255, 255, 255);
  border-radius: 10px;
  background: #86a8d8;
}
.title2 li {
  margin-top: 10px;
  float: left;
  width: 15%;
  height: 4vh;
  line-height: 4vh;
  text-align: center;
  font-size: 0.9rem;
}

.title2 li:nth-child(2) {
  width: 30%;
}
.title2 li:nth-child(4) {
  width: 40%;
}

.detail .item {
  float: left;
  width: 15%;
  height: 30%;
  height: 5vh;
  line-height: 5vh;
  font-size: 0.9rem;
  text-align: center;
}
.detail .item:nth-child(2) {
  width: 30%;
}
.detail .item:nth-child(4) {
  width: 40%;
}
</style>